<template>
  <yd-layout>
    <!--	header -->
    <mt-header title="设置审批权" fixed>
      <router-link to="/hello" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div>
      <yd-cell-item>
        <yd-input slot="right" v-model="searchPara" placeholder="请输入搜索条件（姓名、部门、手机号等）"></yd-input>
        <span slot="right"><yd-button size="small" type="hollow" @click.native="search(searchPara)">Search</yd-button></span>
      </yd-cell-item>
    </div>
    <yd-cell-group>
      <yd-cell-item v-for="user in users" v-show="user.real_name" :key="user.toString()">
        <span slot="left" v-show="user.sp_force"><yd-badge type="primary">✔</yd-badge>&nbsp;&nbsp;&nbsp;</span>
        <span slot="left">{{user.real_name}} —— {{user.department}}</span>
        <span slot="right" v-show="!user.sp_force"><yd-button size="small" type="hollow" @click.native="setSp(user.id)">设置为审批人</yd-button></span>
        <span slot="right" v-show="user.sp_force"><yd-button size="small" type="warning" @click.native="setSp(user.id)">移除权限</yd-button></span>
      </yd-cell-item>
    </yd-cell-group>
  </yd-layout>
</template>

<script>
  import userApi from '@/api/userApi.js'
  import { mapState } from 'vuex'
  import { MessageBox } from 'mint-ui'
  export default {
    data() {
      return {
        users: [],
        subState: true,
        searchPara: ''
      }
    },
    computed: {
      ...mapState(['me'])
    },
    methods: {
      findAll() {
        userApi.findUser()
          .then(data => {
            this.users = data.list
          })
          .catch()
      },
      search(searchPara) {
        userApi.findUser(searchPara)
          .then(data => {
            this.users = data.list
            console.log("user", this.users)
          })
          .catch(err => {

          })
      },
      setSp(userId) {
        userApi.setSp(userId)
          .then(data => {
            if (data === '成功') {
              this.$dialog.toast({
                mes: '操作成功!',
                timeout: 1000,
                icon: 'success',
                callback: () => {}
              })
              if (this.searchPara) {
                this.search(this.searchPara)
              } else {
                this.findAll()
              }
            } else {
              this.$dialog.toast({
                mes: '操作失败!',
                timeout: 1000,
                icon: 'error',
                callback: () => {}
              })
            }
          })
          .catch(err => {
            this.$dialog.toast({
              mes: '操作失败!',
              timeout: 1000,
              icon: 'error',
              callback: () => {}
            })
          })
      }
    },
    watch: {},
    mounted() {
      this.findAll()
    }
  }
</script>

<style>

</style>